# Screen Reader Content

## Examples


### Basic

Click 'Show Code' to view the hidden Screen Reader Content.

```typescript
import React from 'react';

import Button from '@splunk/react-ui/Button';
import ScreenReaderContent from '@splunk/react-ui/ScreenReaderContent';


function Basic() {
    return (
        <Button>
            Learn more <ScreenReaderContent>about advanced search options</ScreenReaderContent>
        </Button>
    );
}

export default Basic;
```



### Skip-link

```typescript
import React from 'react';

import styled from 'styled-components';

import Link from '@splunk/react-ui/Link';
import { mixins } from '@splunk/themes';

const StyledLink = styled(Link)`
    ${mixins.skipLink()}
`;


function SkipLink() {
    return <StyledLink to="#main">Skip navigation</StyledLink>;
}

export default SkipLink;
```




## API


### ScreenReaderContent API

The screen reader text is used to wrap content that
is only accessible through screen readers.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| children | React.ReactNode | yes |  |  |
| elementRef | React.Ref<HTMLSpanElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |